<template>
    <div class="app-container">
        试题
      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="查看题目">
          <el-input v-model="topicQuery.number" placeholder="输入题号"></el-input>
        </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getListByNum()">查询</el-button>
          <el-button type="default" @click="resetDate()">清空</el-button>
      </el-form>

      <el-form :inline="true" class="demo-form-inline" style="padding: 5px 20px;">
        <el-form-item label="上传题目">
          <el-input v-model="updateTopic" placeholder=""></el-input>
        </el-form-item>
          <el-button type="primary" @click="addTopic()">添加题目</el-button>
      </el-form>

    <el-table
      :data="list"
      stripe
      style="width: 100%"
      fit
      highlight-current-row
      >
      <el-table-column
        prop="topicName"
        label="卷号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="topicNumber"
        label="题号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="topicNumber"
        label="类型"
        width="180">
      </el-table-column>
      <el-table-column
        prop="topicNumber"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="topicNumber"
        label="答案"
        width="180">
      </el-table-column>
      <el-table-column
        prop="topicNumber"
        label="分值"
        width="180">
      </el-table-column>
      

      <el-table-column label="修改">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open2(scope.row.topicId)">修改</el-button>
        </template>
      </el-table-column>

      <el-table-column label="删除">
        <template slot-scope="scope">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="open1(scope.row.topicId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-pagination
        :current-page="cur"
        :page-size="size"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next,jumper"
        @current-change=""
        >
    </el-pagination>
  </div>
</template>

<script>
    import PanThumb from "@/components/PanThumb"

    export default {
        components:{PanThumb},
        data(){
            return {
                cur:1,
                size:5,
                topicQuery:{
                  number:'',
                  class:'',
                  mark:''
                },
                list: null,
                total: 0,
                updateTopic:'Java'
            }
        },
        methods:{
            getListByNum(){
                this.$axios.get("/examsystem/topic/findDetail",
                    {
                      params:{topicId: this.topicQuery.number}
                    }
                )
                .then(res=>{
                    console.log(res)
                })
            },
            
            resetDate(){
              this.topicQuery={}
            },

            addTopic(){
              this.$axios.post(
                "/examsystem/topic/insertTopic",
                {
                  data:{topic: this.topicQuery}
                }
              ).then(res=>{
                console.log(res)
              });
            },

            updateTopic(){
              this.$axios.post(
                "/examsystem/topic/updateTopic",
                {
                  data:{topic: this.topicQuery}
                }
              ).then(res=>{
                console.log(res)
              });
            },
            open2(id) {
              this.$confirm('确定修改该题目, 是否继续?', '提示', {
                confirmButtonText: '确定',//进入then
                cancelButtonText: '取消',//进入catch
                type: 'warning'
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                });
                this.updateTopic(id)
              }).catch(() => {      
              });
            },

            removeDataById(id){
              this.$axios.delete(
                "/examsystem/topic/deleteTopic",
                {params:{topicId: id}}
              ).then(res=>{
                console.log(res)
              });
            },
            open1(id) {
              this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
                confirmButtonText: '确定',//进入then
                cancelButtonText: '取消',//进入catch
                type: 'warning' 
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                });
                this.removeDataById(id)
              }).catch(() => {      
              });
            }
            
        },
    }

</script>